<script setup lang="ts">
import { useMessage, NButton, NForm, NFormItem, NInput, NSelect, type FormInst } from 'naive-ui'
import { onMounted, reactive, ref } from 'vue'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import useGoBack from '@/hooks/useGoBack'
import useRouteParam from '@/hooks/useRouteParam'
import type { HttpResponse } from '@/utils/http'
import { useRoute } from 'vue-router'
import type { UserInfoModel } from '@/api/user'

const goBack = useGoBack('/cp')
const message = useMessage()
const route = useRoute()
useRouteParam('id', () => queryUserInfo())

const form = reactive<any>({
  toUserId: null,
  fromUserId: null
})

const userInfoLoading = ref(false)
const userInfo = ref({} as UserInfoModel)

const queryUserInfo = async () => {
  const id = route.params.id as string

  userInfo.value = {} as UserInfoModel
  form.toUserId = null

  try {
    userInfoLoading.value = true
    const [error, res] = await sendRequest<HttpResponse<UserInfoModel>>({
      module: 'user',
      api: 'detailInfo',
      uri: {
        id
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    userInfo.value = res.data
    form.toUserId = res.data.id
  } catch (error) {
    console.log(error)
  } finally {
    userInfoLoading.value = false
  }
}

const userList = ref<any[]>([])
const queryUserList = async () => {
  try {
    userInfoLoading.value = true
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'user',
      api: 'list',
      override: {
        params: {
          limit: 100000,
          page: 1
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    userList.value = res.data.list.filter((item: any) => item.id !== route.query.id)
  } catch (error) {
    console.log(error)
  } finally {
    userInfoLoading.value = false
  }
}

const formInst = ref<FormInst | null>(null)
const submitLoading = ref(false)
const handleSubmit = () => {
  if (submitLoading.value) return
  formInst.value?.validate(async (error) => {
    if (error) return

    try {
      submitLoading.value = true
      const [error, res] = await sendRequest<HttpResponse>({
        module: 'user',
        api: 'copyUserRole',
        override: {
          data: form
        }
      })
      if (error) return message.error(error.message)
      if (res.code !== 0) return message.error(res.msg)
      message.success(res.msg)
      window.flags.flushUserPermission = true
      goBack()
    } catch (error) {
      console.log(error)
    } finally {
      submitLoading.value = false
    }
  })
}

onMounted(() => {
  queryUserInfo()
  queryUserList()
})
</script>

<template>
  <div class="copy-permission">
    <NForm
      ref="formInst"
      :model="form"
      class="copy-permission__content"
      label-placement="left"
      label-width="130rem"
      require-mark-placement="left"
    >
      <NFormItem label="姓名：">
        <NInput
          v-model:value="userInfo.userName"
          disabled
        />
      </NFormItem>
      <NFormItem
        label="选择复制用户："
        path="fromUserId"
        :rule="{ required: true, message: '请选择复制用户', trigger: 'change' }"
      >
        <NSelect
          :options="userList"
          value-field="id"
          label-field="userName"
          filterable
          v-model:value="form.fromUserId"
        />
      </NFormItem>
    </NForm>
  </div>

  <FixedAction>
    <div class="copy-permission-buttons">
      <NButton
        color="#999999"
        ghost
        :disabled="submitLoading"
        @click="goBack"
      >
        取消
      </NButton>

      <NButton
        color="#5FB17F"
        :disabled="submitLoading"
        :loading="submitLoading"
        @click="handleSubmit"
      >
        确定
      </NButton>
    </div>
  </FixedAction>
</template>

<style scoped lang="scss">
.copy-permission {
  height: 100%;
  padding: 25rem 56rem 0 36rem;

  .copy-permission__content {
    padding: 20rem;
    height: 100%;
    background-color: #ebeceb;
  }
}

.copy-permission-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16rem;

  .n-button {
    width: 100rem;
    height: 50rem;
  }
}
</style>
